<template>
  <div class="apiLog-container">
    <!-- 数据展示 -->
    <Datalist
      :arr="logList"
      :total="total"
      :page-num="pageNum"
      :page-size="pageSize"
      @page-hange="pageChange"
    >
      <template #title>
        <span style="margin-right: 15px">接口日志</span>
        <el-button type="danger" :icon="Delete" circle size="small" plain text @click="toClear" />
      </template>
      <template #headerLeft>
        <el-form-item label="调用者id" prop="userId">
          <el-input placeholder="调用者id" v-model.trim="SearchForm.userId"></el-input>
        </el-form-item>
        <el-form-item label="接口地址" prop="uri">
          <el-input placeholder="接口地址" v-model.trim="SearchForm.uri"></el-input>
        </el-form-item>
        <el-form-item label="请求IP" prop="">
          <el-input placeholder="请求IP" v-model.trim="SearchForm.requestIp"></el-input>
        </el-form-item>
        <el-form-item label="请求方式" prop="">
          <el-select v-model.trim="SearchForm.httpMethod" placeholder="请求方式" clearable>
            <el-option label="GET" value="GET"></el-option>
            <el-option label="POST" value="POST"></el-option>
            <el-option label="PUT" value="PUT"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template #headerRight>
        <el-form-item>
          <el-button type="primary" @click="toSearch">搜索</el-button>
          <el-button @click="toReset">重置</el-button>
        </el-form-item>
      </template>
      <template #default>
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="userId" label="用户id" width="100" />
        <el-table-column prop="apiName" label="接口名称" width="250" show-overflow-tooltip />
        <el-table-column prop="uri" label="接口URI" width="200" show-overflow-tooltip />
        <el-table-column prop="httpMethod" label="请求方式" width="120">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-tag v-if="scope.row.httpMethod === 'GET'" type="success">GET</el-tag>
              <el-tag v-else-if="scope.row.httpMethod === 'POST'" type="primary">POST</el-tag>
              <el-tag v-else-if="scope.row.httpMethod === 'PUT'" type="warning">PUT</el-tag>
              <el-tag v-else type="danger">{{ scope.row.httpMethod }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="requestTime" label="请求时间" width="200" show-overflow-tooltip />
        <el-table-column prop="queryParams" label="查询参数" width="170" show-overflow-tooltip />
        <el-table-column prop="bodyParams" label="请求体" width="170" show-overflow-tooltip />
        <el-table-column prop="responseResult" label="响应结果" show-overflow-tooltip />
        <el-table-column prop="method" label="执行方法" width="170" show-overflow-tooltip />
        <el-table-column prop="requestIp" label="请求IP" width="200" show-overflow-tooltip />
        <el-table-column prop="cost" label="耗时" width="100" show-overflow-tooltip />
        <el-table-column label="操作" show-overflow-tooltip fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="lookUp(row)">查看</el-button>
          </template>
        </el-table-column>
      </template>
    </Datalist>
    <!-- 查看接口信息 -->
    <el-drawer title="日志信息" show-close v-model="lookUpDrawer" @closed="lookUpClose" :size="700">
      <el-form label-width="auto">
        <el-form-item label="日志ID">
          <el-input v-model="currentLog.id" readonly> </el-input>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="currentLog.userId" readonly></el-input>
        </el-form-item>
        <el-form-item label="接口名称">
          <el-input v-model="currentLog.apiName" readonly></el-input>
        </el-form-item>
        <el-form-item label="接口URI">
          <el-input v-model="currentLog.uri" readonly></el-input>
        </el-form-item>
        <el-form-item label="请求方式">
          <template #default>
            <div style="display: flex; align-items: center">
              <el-tag v-if="currentLog.httpMethod === 'GET'" type="success">GET</el-tag>
              <el-tag v-else-if="currentLog.httpMethod === 'POST'" type="primary">POST</el-tag>
              <el-tag v-else-if="currentLog.httpMethod === 'PUT'" type="warning">PUT</el-tag>
              <el-tag v-else type="danger">{{ currentLog.httpMethod }}</el-tag>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="执行方法">
          <el-input v-model="currentLog.method" readonly></el-input>
        </el-form-item>
        <el-form-item label="请求时间">
          <el-input v-model="currentLog.requestTime" readonly></el-input>
        </el-form-item>
        <el-form-item label="请求耗时">
          <el-input v-model="currentLog.cost" readonly></el-input>
        </el-form-item>
        <el-form-item label="请求IP">
          <el-input v-model="currentLog.requestIp" readonly></el-input>
        </el-form-item>
        <el-form-item label="查询参数">
          <el-input v-model="currentLog.queryParams" readonly type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="请求体" type="textarea">
          <el-input v-model="currentLog.bodyParams" readonly type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="响应结果">
          <vue-json-pretty :data="JSON.parse(currentLog.responseResult ?? '{}')" />
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import Datalist from '@/components/DataList.vue'
import { Delete } from '@element-plus/icons-vue'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
import { getSysLogList, cleanLog } from '@/api/systemLog'

// 分页参数
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const logList = ref<SysLog[]>([])

function pageChange(num: number, size: number) {
  pageNum.value = num
  pageSize.value = size
  toGetSysLogList()
}

const SearchForm = ref<SysLog>({
  method: ''
})

// 获取列表
function toGetSysLogList() {
  getSysLogList(SearchForm.value, { pageSize: pageSize.value, pageNum: pageNum.value }).then(
    (res) => {
      if (res.code === 200) {
        logList.value = res.data?.list!
        total.value = res.data?.total!
      }
    }
  )
}

// 查询
function toSearch() {
  toGetSysLogList()
}

// 重置
function toReset() {
  pageNum.value = 1
  pageSize.value = 10
  SearchForm.value = {}
  toGetSysLogList()
}

const lookUpDrawer = ref(false)
const currentLog = ref<SysLog>({
  id: 0,
  uri: '',
  apiName: '',
  httpMethod: '',
  queryParams: '',
  bodyParams: '',
  responseResult: '',
  method: '',
  requestTime: '',
  requestIp: '',
  userId: '',
  cost: 0
})

// 点击查看
function lookUp(log: SysLog) {
  currentLog.value = log
  lookUpDrawer.value = true
}

// 信息关闭
function lookUpClose() {
  currentLog.value = {}
  lookUpDrawer.value = false
}

// 清空日志
function toClear() {
  ElMessageBox.confirm('清空日志', '确定要清空日志吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  })
    .then(() => {
      cleanLog().then((res) => {
        if (res.code === 200) {
          ElMessage({
            message: '清空成功',
            type: 'success'
          })
          toReset()
        }
      })
    })
    .catch(() => {})
}

onMounted(() => {
  toGetSysLogList()
})
</script>

<style lang="scss" scoped>
.apiLog-container {
  width: 100%;
  height: 100%;
}
</style>
